import React from 'react';
import { ResponsiveContainer, ResponsiveGrid, ResponsiveText, ResponsiveSpacer } from './responsive-container';
import { useResponsive } from '../hooks/use-responsive';
import { pxToVw, pxToVh } from '../utils/responsive';

/**
 * 响应式组件使用示例
 * 展示如何在项目中使用 viewport 单位适配
 */
export const ResponsiveExample: React.FC = () => {
  const { deviceType, isMobile, viewportWidth, viewportHeight } = useResponsive();

  return (
    <ResponsiveContainer className="bg-gray-50 min-h-screen">
      {/* 设备信息展示 */}
      <div className="bg-white rounded-lg shadow-md p-4 mb-6">
        <ResponsiveText size={{ mobile: 'lg', tablet: 'xl', desktop: '2xl' }} className="font-bold mb-4">
          响应式适配示例
        </ResponsiveText>
        
        <div className="space-y-2">
          <p>当前设备: <span className="font-semibold text-blue-600">{deviceType}</span></p>
          <p>视口宽度: <span className="font-semibold text-green-600">{viewportWidth}px</span></p>
          <p>视口高度: <span className="font-semibold text-green-600">{viewportHeight}px</span></p>
          <p>是否移动端: <span className="font-semibold text-purple-600">{isMobile ? '是' : '否'}</span></p>
        </div>
      </div>

      {/* 响应式网格示例 */}
      <div className="bg-white rounded-lg shadow-md p-4 mb-6">
        <ResponsiveText size={{ mobile: 'lg', tablet: 'xl', desktop: '2xl' }} className="font-bold mb-4">
          响应式网格布局
        </ResponsiveText>
        
        <ResponsiveGrid 
          cols={{ mobile: 1, tablet: 2, desktop: 3 }}
          gap={{ mobile: 16, tablet: 24, desktop: 32 }}
        >
          {[1, 2, 3, 4, 5, 6].map((item) => (
            <div 
              key={item}
              className="bg-blue-100 rounded-lg p-4 text-center"
              style={{
                height: pxToVh(120),
                fontSize: pxToVw(16),
              }}
            >
              网格项 {item}
            </div>
          ))}
        </ResponsiveGrid>
      </div>

      {/* 响应式卡片示例 */}
      <div className="bg-white rounded-lg shadow-md p-4 mb-6">
        <ResponsiveText size={{ mobile: 'lg', tablet: 'xl', desktop: '2xl' }} className="font-bold mb-4">
          响应式卡片
        </ResponsiveText>
        
        <div 
          className="bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg text-white p-6"
          style={{
            minHeight: pxToVh(200),
            fontSize: pxToVw(18),
          }}
        >
          <h3 className="font-bold mb-2" style={{ fontSize: pxToVw(24) }}>
            响应式卡片标题
          </h3>
          <p style={{ lineHeight: pxToVw(28) }}>
            这是一个使用 viewport 单位适配的响应式卡片。
            在不同设备上会自动调整大小和间距。
          </p>
        </div>
      </div>

      {/* 响应式按钮示例 */}
      <div className="bg-white rounded-lg shadow-md p-4 mb-6">
        <ResponsiveText size={{ mobile: 'lg', tablet: 'xl', desktop: '2xl' }} className="font-bold mb-4">
          响应式按钮
        </ResponsiveText>
        
        <div className="flex flex-wrap gap-4">
          <button
            className="bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors"
            style={{
              padding: `${pxToVw(12)} ${pxToVw(24)}`,
              fontSize: pxToVw(16),
              minHeight: pxToVw(44), // 移动端最小触摸目标
            }}
          >
            主要按钮
          </button>
          
          <button
            className="bg-gray-500 hover:bg-gray-600 text-white rounded-lg transition-colors"
            style={{
              padding: `${pxToVw(12)} ${pxToVw(24)}`,
              fontSize: pxToVw(16),
              minHeight: pxToVw(44),
            }}
          >
            次要按钮
          </button>
        </div>
      </div>

      {/* 响应式间距示例 */}
      <div className="bg-white rounded-lg shadow-md p-4">
        <ResponsiveText size={{ mobile: 'lg', tablet: 'xl', desktop: '2xl' }} className="font-bold mb-4">
          响应式间距
        </ResponsiveText>
        
        <div className="space-y-4">
          <div 
            className="bg-yellow-100 rounded p-4"
            style={{ fontSize: pxToVw(14) }}
          >
            小间距内容
          </div>
          
          <ResponsiveSpacer size={{ mobile: 16, tablet: 24, desktop: 32 }} />
          
          <div 
            className="bg-green-100 rounded p-4"
            style={{ fontSize: pxToVw(14) }}
          >
            大间距内容
          </div>
          
          <ResponsiveSpacer size={{ mobile: 32, tablet: 48, desktop: 64 }} />
          
          <div 
            className="bg-red-100 rounded p-4"
            style={{ fontSize: pxToVw(14) }}
          >
            超大间距内容
          </div>
        </div>
      </div>
    </ResponsiveContainer>
  );
};

/**
 * 移动端优化示例
 */
export const MobileOptimizedExample: React.FC = () => {
  const { isMobile } = useResponsive();

  return (
    <ResponsiveContainer safeArea={true} className="bg-gray-100">
      {/* 移动端专用导航 */}
      {isMobile && (
        <div 
          className="bg-white shadow-md fixed top-0 left-0 right-0 z-50"
          style={{
            height: pxToVh(60),
            paddingTop: 'env(safe-area-inset-top)',
          }}
        >
          <div className="flex items-center justify-between h-full px-4">
            <span style={{ fontSize: pxToVw(18), fontWeight: 'bold' }}>移动端导航</span>
            <button 
              className="bg-blue-500 text-white rounded px-3 py-1"
              style={{ fontSize: pxToVw(14) }}
            >
              菜单
            </button>
          </div>
        </div>
      )}

      {/* 内容区域 */}
      <div 
        className="pt-4"
        style={{
          paddingTop: isMobile ? pxToVh(80) : pxToVh(20),
        }}
      >
        <div 
          className="bg-white rounded-lg shadow-md p-4 mb-4"
          style={{
            fontSize: pxToVw(16),
            lineHeight: pxToVw(24),
          }}
        >
          <h2 
            className="font-bold mb-3"
            style={{ fontSize: pxToVw(20) }}
          >
            移动端优化内容
          </h2>
          <p>
            这个区域专门针对移动端进行了优化，包括：
          </p>
          <ul className="list-disc list-inside mt-2 space-y-1">
            <li>适配安全区域（刘海屏、底部操作条）</li>
            <li>使用 viewport 单位进行响应式布局</li>
            <li>优化触摸目标大小</li>
            <li>合理的字体大小和行高</li>
          </ul>
        </div>

        {/* 移动端操作按钮 */}
        <div className="flex flex-col space-y-3">
          <button
            className="w-full bg-blue-500 text-white rounded-lg py-3 font-medium"
            style={{
              fontSize: pxToVw(16),
              minHeight: pxToVh(48),
            }}
          >
            主要操作
          </button>
          
          <button
            className="w-full bg-gray-500 text-white rounded-lg py-3 font-medium"
            style={{
              fontSize: pxToVw(16),
              minHeight: pxToVh(48),
            }}
          >
            次要操作
          </button>
        </div>
      </div>
    </ResponsiveContainer>
  );
}; 